<template>
  <div id="up">
    <h2>制冷系统</h2>
    <div class="app-container1" style="margin-top: -50px">
      <h1>关键数据</h1>
      <el-table
        vv-loading="loading"
        :data="tableData"
        border
        :header-cell-style="{ background: '#409eff', color: '#ffffff' }"
        :cell-style="color1"
      >
        <el-table-column
          label="制冷一温度(℃)"
          align="center"
          prop="freezeTemp1"
        />
        <el-table-column
          label="制冷二温度(℃)"
          align="center"
          prop="freezeTemp2"
        />
        <el-table-column
          label="制冷三温度(℃)"
          align="center"
          prop="freezeTemp3"
        />
        <el-table-column label="当前电流(A)" align="center" prop="i" />
        <el-table-column
          label="当前电压(V)"
          align="center"
          prop="v"
          width="202"
        />
        <el-table-column
          label="当前功耗(W)"
          align="center"
          prop="consumptionNow"
        />
        <el-table-column
          label="总能耗(KWH)"
          align="center"
          prop="consumptionAll"
        />
        <el-table-column label="运行状态" align="center" prop="state" />
      </el-table>
    </div>
    <el-date-picker
      clearable
      v-model="zlTime"
      type="date"
      value-format="yyyy-MM-dd"
      placeholder="请选择测试时间"
      style="margin-left: 30px"
    >
    </el-date-picker>
    <el-button
      type="primary"
      icon="el-icon-search"
      size="mini"
      @click="handleQuery"
      style="margin-left: 20px"
      >搜索
    </el-button>
    <div class="proCharts" ref="echart" style="height: 300px"></div>
    <div class="proCharts" ref="echarts" style="height: 300px"></div>
    <div class="proCharts" ref="echar" style="height: 300px"></div>
    <div class="proCharts" ref="numBetweenZl" style="height: 300px"></div>
  </div>
</template>

<script>
import * as echarts from "echarts";
import {
  zlLine,
  zlgetData,
  numBetweenZl,
  zlgetData2,
} from "@/api/system/zdsx.js";
import axios from "axios";
export default {
  data() {
    return {
      loading: false,
      zlTime: "",
      tableData: [
        {
          freezeTemp1: null,
          freezeTemp2: null,
          freezeTemp3: null,
          i: null,
          v: null,
          consumptionNow: null,
          consumptionAll: null,
          state: null,
        },
      ],
    };
  },
  mounted() {
    // this.getOilList();
    this.getOil();
    this.getTypeList();
    // this.get();
    // this.getNumBetweenZl();
  },
  methods: {
    color1({ row, column }) {
      if (column.label === "运行状态") {
        if (row.state === "功耗过高") {
          return "background-color:#ff6666;color:#fff";
        } else if (row.state === "制冷一段温度过高") {
          return "background-color:#ff6666;color:#fff";
        } else if (row.state === "制冷一段温度过低") {
          return "background-color:#87CEFA;color:#fff";
        } else if (row.state === "制冷二段温度过高") {
          return "background-color:#ff6666;color:#fff";
        } else if (row.state === "制冷二段温度过低") {
          return "background-color:#87CEFA;color:#fff";
        } else if (row.state === "制冷三段温度过高") {
          return "background-color:#ff6666;color:#fff";
        } else if (row.state === "制冷三段温度过低") {
          return "background-color:#87CEFA;color:#fff";
        }
      } else if (column.label === "当前功耗(W)") {
        if (row.state === "功耗过高") {
          return "background-color:#ff6666;color:#fff";
        }
      } else if (column.label === "制冷一温度(℃)") {
        if (row.state === "制冷一段温度过高") {
          return "background-color:#ff6666;color:#fff";
        } else if (row.state === "制冷一段温度过低") {
          return "background-color:#87CEFA;color:#fff";
        }
      } else if (column.label === "制冷二温度(℃)") {
        if (row.state === "制冷二段温度过高") {
          return "background-color:#ff6666;color:#fff";
        } else if (row.state === "制冷二段温度过低") {
          return "background-color:#87CEFA;color:#fff";
        }
      } else if (column.label === "制冷三温度(℃)") {
        if (row.state === "制冷三段温度过高") {
          return "background-color:#ff6666;color:#fff";
        } else if (row.state === "制冷三段温度过低") {
          return "background-color:#87CEFA;color:#fff";
        }
      }
    },
    getTypeList() {
      this.loading = true;
      zlgetData().then((response) => {
        this.tableData = response.data;
        this.loading = false;
      });
      console.log(this.queryParams);
    },
    getOil() {
      this.loading = true;
      zlLine(this.zlTime).then((res) => {
        const option = {
          xAxis: {
            data: res.data[0][1],
          },
          yAxis: {
            type: "value",
          },
          legend: {
            data: ["电流(A)"],
          },
          tooltip: {
            trigger: "axis",
            axisPointer: {
              type: "cross",
              label: {
                backgroundColor: "#6a7985",
              },
            },
          },
          series: [
            {
              name: "电流(A)",
              data: res.data[0][0],
              type: "line",
            },
          ],
        };
        const E = echarts.init(this.$refs.echarts);
        E.setOption(option);
        const option2 = {
          xAxis: {
            data: res.data[0][1],
          },
          yAxis: {
            type: "value",
          },
          legend: {
            data: ["制冷1段温度(℃)", "制冷2段温度(℃)", "制冷3段温度(℃)"],
          },
          tooltip: {
            trigger: "axis",
            axisPointer: {
              type: "cross",
              label: {
                backgroundColor: "#6a7985",
              },
            },
          },
          series: [
            {
              name: "制冷1段温度(℃)",
              data: res.data[1][0],
              type: "line",
            },
            {
              name: "制冷2段温度(℃)",
              data: res.data[2][0],
              type: "line",
            },
            {
              name: "制冷3段温度(℃)",
              data: res.data[3][0],
              type: "line",
            },
          ],
        };
        const E2 = echarts.init(this.$refs.echart);
        E2.setOption(option2);
        const option3 = {
          xAxis: {
            data: res.data[0][1],
          },
          yAxis: {
            type: "value",
          },
          legend: {
            data: ["电压(V)"],
          },
          tooltip: {
            trigger: "axis",
            axisPointer: {
              type: "cross",
              label: {
                backgroundColor: "#6a7985",
              },
            },
          },
          series: [
            {
              name: "电压(V)",
              data: res.data[0][2],
              type: "line",
            },
          ],
        };
        const E3 = echarts.init(this.$refs.echar);
        E3.setOption(option3);
      });
    },
    // get() {
    //   this.loading = true;
    //   zlLine(this.zlTime).then((res) => {
    //     const option = {
    //       xAxis: {
    //         data: res.data[0][1],
    //       },
    //       yAxis: {
    //         type: "value",
    //       },
    //       legend: {
    //         data: ["电压(V)"],
    //       },
    //       tooltip: {
    //         trigger: "axis",
    //         axisPointer: {
    //           type: "cross",
    //           label: {
    //             backgroundColor: "#6a7985",
    //           },
    //         },
    //       },
    //       series: [
    //         {
    //           name: "电压(V)",
    //           data: res.data[0][2],
    //           type: "line",
    //         },
    //       ],
    //     };
    //     const E = echarts.init(this.$refs.echar);
    //     E.setOption(option);
    //   });
    // },
    // getOilList() {
    //   this.loading = true;
    //   zlLine(this.zlTime).then((res) => {
    //     const option = {
    //       xAxis: {
    //         data: res.data[0][1],
    //       },
    //       yAxis: {
    //         type: "value",
    //       },
    //       legend: {
    //         data: ["制冷1段温度(℃)", "制冷2段温度(℃)", "制冷3段温度(℃)"],
    //       },
    //       tooltip: {
    //         trigger: "axis",
    //         axisPointer: {
    //           type: "cross",
    //           label: {
    //             backgroundColor: "#6a7985",
    //           },
    //         },
    //       },
    //       series: [
    //         {
    //           name: "制冷1段温度(℃)",
    //           data: res.data[1][0],
    //           type: "line",
    //         },
    //         {
    //           name: "制冷2段温度(℃)",
    //           data: res.data[2][0],
    //           type: "line",
    //         },
    //         {
    //           name: "制冷3段温度(℃)",
    //           data: res.data[3][0],
    //           type: "line",
    //         },
    //       ],
    //     };
    //     const E = echarts.init(this.$refs.echart);
    //     E.setOption(option);
    //   });
    // },
    //制冷中段计数2

    //制冷中段计数1
    getNumBetweenZl() {
      numBetweenZl(this.zlTime).then((res) => {
        console.log(res.data, "111133");
        const e = echarts.init(this.$refs.numBetweenZl);
        const option = {
          xAxis: {
            type: "category",
            // name: "时间",
            data: res.data[0][1],
          },
          yAxis: {
            type: "value",
            name: "制冷中段计数(排）",
          },
          series: [
            {
              type: "line",
              name: "制冷中段计数1(排）",
              data: res.data[0][0],
              markPoint: {
                data: [
                  { type: "max", name: "Max" },
                  { type: "min", name: "Min" },
                ],
              },
              markLine: {
                data: [{ type: "average", name: "Avg" }],
              },
            },
            {
              type: "line",
              name: "制冷中段计数2(排）",
              data: res.data[1][0],
              markPoint: {
                data: [
                  { type: "max", name: "Max" },
                  { type: "min", name: "Min" },
                ],
              },
              color: ["rgb(64, 158, 255)"],
              // lineStyle: {
              //   // 设置线条的style等
              //   normal: {
              //     color: "blue", // 折线线条颜色:红色
              //   },
              // },
              markLine: {
                data: [
                  { type: "average", name: "Avg" },
                  {
                    symbol: "none",
                    x: "90%",
                    yAxis: "max",
                  },
                  {
                    symbol: "circle",
                    label: {
                      position: "start",
                      formatter: "Max",
                    },
                    type: "max",
                    name: "最高点",
                  },
                ],
              },
            },
          ],
          tooltip: {
            trigger: "axis",
          },
          legend: {},
        };
        e.setOption(option, true);
      });
    },
    handleQuery() {
      // this.getOilList();
      this.getOil();
      this.getTypeList();
      // this.get();
      // this.getNumBetweenZl();
    },
  },
};
</script>

<style>
.proCharts {
  width: 100%;
  height: 600px;
  /* margin-top: -300px; */
}

h2 {
  font-size: 35px;
  text-align: center;
  color: #0072c6;
}
</style>
